<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card>
            <el-row>
                <el-button type="primary" @click="showAddCategories">添加分类</el-button>
            </el-row>
          <!-- 表单 -->
           <tree-table :data='cateList' 
           :columns="columns" 
           show-index 
           :selection-type='false' 
           :expand-type='false' 
           border
           class="tree-table"
           :show-row-hover = false
           >
           <!-- 是否有效 -->
           <template slot="isok" slot-scope="scope">
              <i class="el-icon-success" style="color:lightgreen" v-if="scope.row.cat_deleted === false"></i>
              <i class="el-icon-error" style="color:red" v-else></i>
           </template>
            <!-- 排序 -->
           <template slot="order" slot-scope="scope">
                <el-tag v-if="scope.row.cat_level == 0">一级</el-tag>
                <el-tag v-else-if="scope.row.cat_level == 1" type="success">二级</el-tag>
                <el-tag v-else type="danger">三级</el-tag>
           </template>
            <!-- 操作 -->
           <template slot="opt" slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" @click="revCate(scope.row)">编辑</el-button>
                <el-button type="danger" icon="el-icon-delete" @click="delCate(scope.row.cat_id)">删除</el-button>
           </template>
           </tree-table>
           <!-- 分页 -->
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="cateObj.pagenum"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="cateObj.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </el-card>
        <!-- 添加分类对话框 -->
        <el-dialog
        title="添加分类"
        :visible.sync="showAddDialog"
        width="50%"
        @close='cerAddDialog'
        >
        <el-form :model="addCateFrom" :rules="addCateFromRules" ref="addCateFromRef" label-width="100px">
        <el-form-item label="分类名称 :" prop="cat_name">
            <el-input v-model="addCateFrom.cat_name"></el-input>
        </el-form-item>
         <el-form-item label="父级名称 :">
             <!-- 级联选择器 -->
             <!-- options数据源 -->
             <!-- props用来指定配置项 -->
            <el-cascader
                expandTrigger='hover'
                v-model="arrCascader"
                :options="addParentCateList"
                :props="cascaderProps"
                @change="parentCateChange"
                change-on-select
                clearable
                >
            </el-cascader>            
        </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="showAddDialog = false">取 消</el-button>
            <el-button type="primary" @click="addCascader">确 定</el-button>
        </span>
        </el-dialog>
        <!-- 编辑对话框 -->
        <el-dialog
        title="编辑"
        :visible.sync="showRevDialog"
        width="50%">
        <el-form :model="revCateForm" :rules="revCateFormRules" ref="revCateFormRef" label-width="100px">
        <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="revCateForm.cat_name"></el-input>
        </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="showRevDialog = false">取 消</el-button>
            <el-button type="primary" @click="revCateFormOk">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return{
            //商品分类数据
            cateList:[],
            //请求传过去的默认参数
            cateObj:{
              type:3,
              pagenum:1,
              pagesize:5
            },
            //总条数
            total:0,
            //为table指定列的定义
            columns:[
               {
                     label:'分类名称',
                     prop:'cat_name'
               },
                {
                    label: '是否有效',
                    prop: 'cat_deleted',
                    // 将当前列定义为模板列
                    type: 'template',
                    //当前这一列使用的名称
                    template: 'isok',
                },
                {
                    label: '排序',
                    prop: 'cat_level',
                    // 将当前列定义为模板列
                    type: 'template',
                    //当前这一列使用的名称
                    template: 'order',
                },
                 {
                    label: '操作',
                    prop: 'cat_deleted',
                    // 将当前列定义为模板列
                    type: 'template',
                    //当前这一列使用的名称
                    template: 'opt',
                },
            ],
            // 添加分类对话框默认状态    
            showAddDialog:false,
            //添加分类表单数据对象
            addCateFrom:{
                cat_name:'',
                cat_pid:0,
                cat_level:0
            },
            //添加分类效验规则
            addCateFromRules:{
                cat_name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ]            
            },
            //添加分类的父级分类数据
           addParentCateList:[],
           //指定级联选择器的配置对象
           cascaderProps:{
               //选中值的属性
               value:'cat_id',
               //看到的属性
               label:'cat_name',
               //嵌套的属性
               children:'children'
           },
           //选中的父级分类的数组
           arrCascader:[],
           //编辑对话框状态
           showRevDialog:false,
           //编辑按钮的当前数据
           revCateForm:{},
           //编辑对话框的表单效验
           revCateFormRules:{
                cat_name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ]
           }
        }
    },
    created () {
        this.getCateList ()
    },
    methods:{
       async getCateList () {
          const res = await this.$http.get('categories',{params:this.cateObj})
           if(res.data.meta.status == 200){
               this.cateList =res.data.data.result
               this.total = res.data.data.total
           }else{
               return this.$message.error('获取分类列表失败');
           }
        },
        //每页条数
        handleSizeChange (newPagesize) {
          this.cateObj.pagesize = newPagesize
          this.getCateList()       
        },
        //当前页
        handleCurrentChange (newPagenum) {
          this.cateObj.pagenum = newPagenum
          this.getCateList()
        },
        //点击添加按钮
        showAddCategories () {
            //调用获取父级分类的函数
            this.getParentCateList()
            //显示添加分类的对话框
            this.showAddDialog = true
        },
        async getParentCateList () {
            const res = await this.$http.get('categories',{params:{type:2}})
            if(res.data.meta.status == 200){
              this.addParentCateList = res.data.data
            }else{
                return this.$message.error('获取分类的父级分类数据失败'); 
            }
        },
        //添加下拉框选项发生变化时
        parentCateChange () {
            //如果arrCascader的长度大于0说明选中了父级分类
            //如果选中的父级分类的数组的长度为0说明没有选中任何父级分类
           if(this.arrCascader.length>0){
               //父级分类的id
               this.addCateFrom.cat_pid = this.arrCascader[this.arrCascader.length-1]
               //当前的等级
               this.addCateFrom.cat_level = this.arrCascader.length
               return
           }else{
               //父级分类的id
               this.addCateFrom.cat_pid =0
                  //当前的等级
               this.addCateFrom.cat_level =0
           }
        },
        //点击添加按钮添加数据
        addCascader () {
             this.$refs.addCateFromRef.validate(async valid=>{
               if(!valid){
                  return
               }else{
                   const res = await this.$http.post('categories',this.addCateFrom)
                    if(res.data.meta.status == 201){
                      this.$message.success('添加分类成功');
                      this.getCateList()
                      this.showAddDialog = false
                    }else{
                        return this.$message.error('添加分类失败');
                    }
               }
             })
        },
        //添加对话框的关闭回调
        cerAddDialog () {
            this.$refs.addCateFromRef.resetFields()
            this.arrCascader = []
           this.addCateFrom.cat_pid =0
           this.addCateFrom.cat_level =0
        },
        //删除商品分类数据
       async delCate (id) {
           const confirm = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).catch(err=>err) 
            if(confirm == 'cancel'){
                return this.$message.info('取消删除');
            }else{
                const res = await this.$http.delete('categories/'+id)
                if(res.data.meta.status == 200){
                   this.$message.success('删除成功');
                   this.getCateList()
                }
            }
        },
        //点击编辑按钮
        revCate (data) {
            //当前行的类容赋值给revCateForm
            this.revCateForm = data
            this.showRevDialog = true
        },
        revCateFormOk () {
            this.$refs.revCateFormRef.validate(async valid=>{
                if(!valid){
                  return
                }else{
                    const res = await this.$http.put('categories/'+this.revCateForm.cat_id,{cat_name:this.revCateForm.cat_name})
                    if(res.data.meta.status == 200){
                        this.$message.success('修改成功');
                        this.getCateList()
                        this.showRevDialog = false
                    }else{
                       return this.$message.error('删除分类失败');
                    }
                }
            })
        }
    }
    
}
</script>

<style lang="less" scoped>
   .tree-table{
       margin-top: 15px;
   }
   .el-cascader{
       width: 100%;
   }
</style>